<template>
  <div class="aid">
    <div class="base">
      <p>{{ JSON.stringify(text)=='{}'?'新增角色':'修改角色' }}
        <a-icon @click="closeFunction(false)" class="closeCircle" type="close-circle" />
      </p>
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="名称" prop="Name">
          <a-input v-model="form.Name" :allowClear="true" />
        </a-form-model-item>
        <a-form-model-item label="可管理部门">
          <!-- <i style="position: absolute;left: -104px;color: red;font-weight: bold;">*</i> -->
          <a-select mode="multiple" :value="value" @change="handleChange" label-in-value option-filter-prop="children">
            <a-select-option v-for="(item, index) in departList" :key="item.ID">{{ item.DepartName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-item label="权限" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <i style="position: absolute;left: -62px;color: red;font-weight: bold;">*</i>
          <tree :treeDate="treeDate" :treeValue="treeValue" @func="getMsgFormSon"></tree>
        </a-form-item>
        <a-form-model-item label="" :wrapper-col="{ offset: 5 }">
          <el-button type="success" size="medium" class="btn2" @click="handleSubmit">
            {{ JSON.stringify(text)=='{}'?'确认添加':'确认修改' }}
          </el-button>
          <el-button size="medium" style="margin-left: 10px;" @click="closeFunction(false)">
            取消
          </el-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
	import tree from '@/components/tree/tree.vue'
	import {
		getRoleData,
		getRoleDepartList,
		addRole,
		updateRole
	} from '@/api/follow'

	export default {
		components: {
			tree
		},
		props: {
			text: Object
		},
		watch: {
			text: function(text) {
				if (JSON.stringify(text) == '{}') {
					this.form = {}
					this.value = []
					this.treeValue = []
				} else {
					this.form = text
					this.value = []
					let arr = text.ManageDepartID ? text.ManageDepartID.split(',') : []
					arr.forEach(item => {
						this.value.push({
							key: item
						})
					})
					if (text.XML) {
						this.treeValue = text.XML.split(',')
					}
					this.form.XML = text.XML
				}
			}
		},
		data() {
			return {
				treeDate: [],
				power: [],
				treeValue: [],
				departList: [],
				formLayout: 'horizontal',
				DepartName: '',
				value: [],
				form: {
					Name: '',
					ID: '',
					ManageDepartID: '',
					XML: ''
				},
				rules: {
					Name: [{
						required: true,
						message: '请输入区域名称',
						trigger: 'blur'
					}],
					ManageDepartID: [{
						required: true,
						message: '请选择可管理部门',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this._getInfo()
		},
		methods: {
			closeFunction(flag) {
				this.$emit('closeFun',flag)
			},
			handleChange(list) {
				this.value = list
				let ManageDepart = []
				list.forEach(item => {
					ManageDepart.push(item.key)
				})
				this.form.ManageDepartID = ManageDepart.toString()
			},
			filterOption(input, option) {
				return (
					option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
				)
			},
			async _getInfo() {
				let role = await getRoleData()
				let RoleList = role.data.data
				let str = JSON.stringify(RoleList)
				str = str.replace(/Name/g, 'title')
				str = str.replace(/ID/g, 'key')
				str = str.replace(/functionGroup/g, 'children')
				str = str.replace(/function/g, 'children')
				this.treeDate = JSON.parse(str)
				let data = {}
				data.key = ''
				let depart = await getRoleDepartList(data)
				this.departList = depart.data.data
				this.departList.unshift({
					ID: '-1',
					DepartName: '全部'
				})
			},
			getMsgFormSon(data) {
				this.power = data
				let ids = []
				for (let m = 0; m < data.length; m++) {
					for (let i = 0; i < this.treeDate.length; i++) {
						if (this.treeDate[i].value == data[m]) {
							for (let j = 0; j < this.treeDate[i].children.length; j++) {
								for (let p = 0; p < this.treeDate[i].children[j].children.length; p++) {
									ids.push(this.treeDate[i].children[j].children[p].value)
								}
							}
						} else {
							for (let j = 0; j < this.treeDate[i].children.length; j++) {
								if (this.treeDate[i].children[j].value == data[m]) {
									for (let p = 0; p < this.treeDate[i].children[j].children.length; p++) {
										ids.push(this.treeDate[i].children[j].children[p].value)
									}
								} else {
									for (let p = 0; p < this.treeDate[i].children[j].children.length; p++) {
										if (this.treeDate[i].children[j].children[p].value == data[m]) {
											ids.push(this.treeDate[i].children[j].children[p].value)
										}
									}
								}
							}
						}
					}
				}
				this.form.XML = ids.join(',')
			},
			handleSubmit(e) {
				// if (!this.form.ManageDepartID) {
				// 	this.$message.error('请选择可管理部门')
				// 	return false
				// }
				if (!this.form.XML) {
					this.$message.error('请选择权限')
					return false
				}
				this.$refs.ruleForm.validate(async valid => {
					if (valid) {
						let res = {}
						if (this.text.ID) {
							res = await updateRole(this.form)
						} else {
							res = await addRole(this.form)
						}
						this.$message.success(res.data.msg)
						if (res.data.code === 1) {
							setTimeout(() => {
								this.closeFunction(true)
							}, 1000)
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.row {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}

	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}

	.base {
		position: fixed;
		width: 600px;
		height: 540px;
		background: #fff;
		left: 50%;
		top: 50%;
		margin-left: -300px;
		margin-top: -270px;
		overflow-y: auto;
		border-radius: 8px;

		/deep/.ant-form-item {
			margin: 20px 30px 10px 20px;
			position: relative;
			/deep/.ant-form-item-label {
				margin-right: 10px;
				width: 110px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: right !important;
			}

			/deep/.ant-form-item-control-wrapper {
				flex: 1;
			}
		}
	}

	.base p {
		padding: 20px 0 0 20px;
		font-size: 16px;

		.closeCircle {
			font-size: 22px;
			float: right;
			margin-right: 18px;
		}
	}

	.subnav {
		margin-left: 60px;
		height: 46px;
		display: flex;
	}

	.subnav p {
		width: 100px;
		text-align: right;
	}

	.subnav input {
		width: 300px;
		height: 30px;
		border: 1px solid #DAD9DC;
		margin-left: 20px;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}
</style>
